<script setup lang="ts">
import { ElTree } from 'element-plus'
import { type Tree, usePointTree, useTreeFilter } from './ViewTree'

const props = defineProps<{
  modelType: string
}>()
const emits = defineEmits<{
  (e: 'click-node', o: Tree): void
}>()

const { treeData, vLoading } = usePointTree(() => props.modelType)

const treeRef = ref<InstanceType<typeof ElTree>>()

const { filterTextInput, filterNode } = useTreeFilter(
  'pointName',
  (val: string) => treeRef.value?.filter?.(val),
)

function clickNode(o: Tree) {
  emits('click-node', o)
}
</script>

<template>
  <div v-loading class="view-tree height-fill box-border">
    <h5
      class="flex-incompressible margin-0 align-center flex justify-between"
    >
      <span>用能单元（点位）</span>
    </h5>
    <ElInput
      v-model="filterTextInput"
      placeholder="关键字"
      class="flex-incompressible"
    />
    <BScrollbar>
      <ElTree
        ref="treeRef"
        class="flex-fillRemaining"
        :data="treeData"
        :props="{
          label: 'pointName',
          children: 'children',
        }"
        node-key="id"
        highlight-current
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @contextmenu.prevent
        @node-click="clickNode"
      >
        <template #default="{ node }">
          <div
            class="flex-fillRemaining align-center custom-tree-node flex"
          >
            <span>{{ node.label }}</span>
          </div>
        </template>
      </ElTree>
    </BScrollbar>
  </div>
</template>
